import { Button, Steps, Space, Table } from "antd";
import { UserOutlined, } from '@ant-design/icons';
import React, { useEffect, useState, } from "react";
import style from "./scss/orderDetail.module.scss"
import CommodityCard from "@/ui/xx-commodityCard/commodityCard";
/**
 * @description 订单详情
 * @author 韩
 */
const OrderDetail = ({ onRef, }) => {

    useEffect(() => {
        getDetail();
    }, [])
    /**@description 获取详情 */
    const getDetail = async () => {
    }




    const columns = [
        {
            title: '商品',
            dataIndex: 'CommodityInformation',
            key: 'CommodityInformation',
            render: (text, record) => <CommodityCard data={record} />,
        },
        {
            title: '单价（元）',
            dataIndex: 'unitPrice',
            key: 'unitPrice',
            width: 140
        },
        {
            title: '优惠（元）',
            dataIndex: 'favorale',
            key: 'favorale',
            width: 140
        },
        {
            title: '实付（元）',
            key: 'outOfPocket',
            dataIndex: 'outOfPocket',
            width: 140
        },
        {
            title: '退款状态',
            key: 'refundStatus',
            dataIndex: 'refundStatus',
            width: 140
        },
        {
            title: '发货状态',
            key: 'shippingStatus',
            dataIndex: 'shippingStatus',
            width: 140
        },
    ];
    const list = [
        {
            CommodityInformation: '新款手机',
            imgUrl: "http://localhost:5832/bil_Ste_static/file/2024-11-19/a7fb7c95-92ac-4eb0-91c0-35514062e63a.webp",
            unitPrice: 99.99,
            favorale: 1,
            outOfPocket: 0,
            refundStatus: 1,
            shippingStatus: 3
        },
        {
            CommodityInformation: '新款手机',
            unitPrice: 99.99,
            favorale: 1,
            outOfPocket: 0,
            refundStatus: 1,
            shippingStatus: 3
        },
    ];
    return (
        <div
            className={style.Detail}
        >
            <div className="content">
                <div className="header">
                    <Space style={{ display: "flex" }}>
                        <div className="header-item">
                            <span className="label">订单编号：</span>
                            <span className="value">E545155456123455545</span>
                        </div>
                        <div className="header-item">
                            <span className="label">下单时间：</span>
                            <span className="value">2024-22-11 19:22:33</span>
                        </div>
                        <div className="header-item">
                            <span className="value">普通订单-微信小程序商城</span>
                        </div>
                    </Space>
                    <Space>
                        <Button type="primary">发货</Button>
                        <Button type="primary" danger>取消订单</Button>
                    </Space>
                </div>
                <div className="order-status">
                    <div className="status-left">
                        <h2 className="title">商家已发货</h2>
                        <span className="tips">买家如果7天内没有申请退款，交易将自动完成</span>
                    </div>
                    <div className="status-speed">
                        <Steps
                            items={[
                                {
                                    title: "买家已下单",
                                    status: "finish",
                                    icon: <UserOutlined />,
                                    description: "2024-22-11 19:22:33"
                                },
                                {
                                    title: "买家已付款",
                                    status: "finish",
                                    icon: <UserOutlined />,
                                    description: "2024-22-11 19:24:33"
                                },
                                {
                                    title: "商家已发货",
                                    status: "process",
                                    icon: <UserOutlined />,
                                    description: "2024-22-12 11:12:33"
                                },
                                {
                                    title: "买家已收货",
                                    status: "wait",
                                    icon: <UserOutlined />
                                }
                            ]}
                        ></Steps>
                    </div>
                </div>

                <div className="address">
                    <div className="address-item">
                        <div className="item-title">
                            收货人信息
                        </div>
                        <div className="item-more">
                            <span className="concat">姓名：张三</span>
                            <span className="concat">手机号：13344949444</span>
                            <span className="concat">地址：广州市白云区XXXX街道XXXX路XXXX号 XXXX楼202</span>
                        </div>
                    </div>
                    <div className="address-item">
                        <div className="item-title">
                            付款信息
                        </div>
                        <div className="item-more">
                            <span className="concat">实付金额：0.01</span>
                            <span className="concat">付款方式：微信支付</span>
                            <span className="concat">付款时间：2024-22-11 19:22:33</span>
                        </div>
                    </div>
                    <div className="address-item">
                        <div className="item-title">
                            买家信息
                        </div>
                        <div className="item-more">
                            <span className="concat">买家：zs99392</span>
                            <span className="concat">买家留言：啵啵奶茶不要啵啵不要茶</span>
                        </div>
                    </div>
                </div>
                <div className="product-list">
                    <Table columns={columns} dataSource={list} />
                </div>
            </div>


        </div>

    )
}
export default OrderDetail;